// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {computed} from 'mobx';

// 组件引入
import {DetailsItem} from './DetailsItem';

// 样式引入
import styles from './style.module.less';

@observer
class DetailsList extends Component {
  @computed get assets() {
    const assets = this.props.data.assets || [];
    let arr = [];
    let total = 0;
    for (let i = 0, len = assets.length; i < len; i++) {
      arr.push(assets[i]);
      total += assets[i].files.length;
      // 控制最多显示2000条...不然显示太多要崩溃.在实际项目中有其他解决办法
      if(total>2000) break;
    }
    return arr;
  }
  render() {
    return (
      <ul
        className={classNames(styles.detailsList, this.props.className, 'clearfix')}
        style={this.props.style}>
        {this
          .assets
          .map(item => (<DetailsItem key={item.version} name={this.props.data.name} version={item.version} files={item.files}/>))}
      </ul>
    );
  }
}

DetailsList.defaultProps = {
  data: {}
};

const InjectDetailsList = inject(({
  libsStore = {}
}) => ({data: libsStore.libDetails.data}))(DetailsList);

export {DetailsList, InjectDetailsList};